angular.module('News').directive('itemsListing',
  ['ItemsService',function (ItemsService) {
    return {
      restrict:'E',
      scope:{
        item:'=data'
      },
      replace:true,
      template:'<div class="accordion-group {{item.id}}" id="item{{item.id}}"></div>',
      compile:function (element, attrs) {
        var html = '' +
            '<div class="accordion-heading">' +
              '<a class="accordion-toggle read-{{!item.unread}} starred-{{item.starred}}" data-toggle="collapse" data-parent="#accordion1" href="#collapse{{item.id}}">' +
                '<span>{{item.title}}</span>' +
                '<br/>' +
                '<span ng-show="item.autor" class="itemadd">author: <span>{{item.author}}</span></span>' +
                '<span ng-hide="item.autor" class="itemadd">author: <span>unknown</span></span>' +
                '<span ng-show="item.pubDate" class="itemadd">date published: <span>{{item.pubDate}}</span></span>' +
                '<span ng-hide="item.pubDate" class="itemadd">date published: <span>unknown</span></span>' +
              '</a>' +
            '</div>' +
            '<div id="collapse{{item.id}}" class="accordion-body collapse">' +
            '<div class="accordion-inner">' +
            '<div class="accordion-heading">' +
            '<div class="bodybox" ng-bind-html-unsafe="item.body"></div>' +
            '<div class="buttonsbox">' +
              '<span class="itemaddurl"><a ng-href="{{item.url}}" target="_blank"><i class="icon-file"></i></a></span>' +
              '<span class="itemaddurl">' +
                '<a class="read" href ng-click="readToggle(item.id)"><i ng-class="{\'icon-eye-open\':item.unread,\'icon-eye-close\':!item.unread}"></i></a>' +
              '</span>' +
              '<span class="itemaddurl">' +
                '<a class="star" href ng-click="starToggle(item.feedId,item.guidHash)"><i ng-class="{\'icon-star\':item.starred,\'icon-star-empty\':!item.starred}"></i></a>' +
              '</span>' +
        '</div></div></div></div>';

        element.append($(html));

        return this.link;
      },
      link:function (scope, element, attrs) {
        scope.readToggle = function (id) {

          if(scope.item.unread === true) {
            ItemsService.setRead(id).success(function(result, status){
              scope.item.unread = false;
              $('.' + scope.item.id + ' a.read i').toggleClass('icon-eye-open icon-eye-close');
              $('.' + scope.item.id +' .accordion-toggle').toggleClass('read-true read-false');
            });
          }
          else if (scope.item.unread === false) {
            ItemsService.unsetRead(id).success(function(result, status){
              scope.item.unread = true;
              $('.' + scope.item.id + ' a.read i').toggleClass('icon-eye-open icon-eye-close');
              $('.' + scope.item.id +' .accordion-toggle').toggleClass('read-true read-false');
            });
          }
        };
        ...
        $(element).hide();
        $(element).fadeIn();
      }
    };
}]);
